<template>
  <div class="home">
    <!-- 头部 -->
    <header>
      <h1 @click="guangli">{{ store.Arr[0]?.title || '选择考试'}}</h1>
      <div class="header_right">
        <span><van-icon name="search" @click="$router.push('/search')" /></span>
        <span><van-icon name="smile-o" /></span>
      </div>
    </header>
    <nav v-if="store.Arr.length">
      <van-tabs
        v-model:active="data.active"
        title-active-color="red"
        @click-tab="navTab"
      >
        <van-tab title="精选">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item
              v-for="(item2, index2) in data.banner"
              :key="index2"
               @click="$router.push(`/goods/${item2.link}`)"
            >
              <img :src="item2.banner_img" alt="" />
            </van-swipe-item>
          </van-swipe>
          <div class="juli">
            <van-icon name="smile-o" />
            <p>距离考研198天</p>
          </div>

          <div class="ke">
            <h1>{{ data.keObj }}</h1>
            <p @click="$router.push(`/mfke/?name=${data.keObj}`)">查看全部></p>
          </div>
          <h1>{{ data.keObj1 }}</h1>

                <!-- 三个人头数据列表 -->
          <ul class="Sanren">
            <li v-for="(item3, index3) in data.SanList" :key="item3.id" @click="$router.push(`/goods/${item3.id}`)">
              <div class="div1">
                <p
                v-show="index4 == 0"
                  v-for="(item4, index4) in item3.teacher"
                  :key="index4"
                  class="teacher"
                >
                  <img :src="item4.avatar" alt="" />
                  <p>{{item3.title}}</p>
                  <p class="p1">￥{{index3 == 0?'免费':item3.price/100+'.00'}}</p>
                  <p class="ren">{{item3.sales_num}}人购买</p>
                </p>
              </div>
              <!-- <div class="ren">
                <p>{{ item3.sales_num }}人已报名</p>
                <p style="color: red">￥{{ item3.price / 10000 }}</p>
              </div> -->
            </li>
          </ul>

          <!-- 首页静态列表数据 -->
          <ul class="list">
            <li
              v-for="(item3, index3) in data.jingList.course_list"
              :key="item3.id"
              @click="$router.push(`/goods/${item3.id}`)"
            >
              <span class="sp">{{ item3.course_classify_title }}</span>
              <p class="p1">{{ item3.title }}</p>
              <div class="div1">
                <p
                  v-for="(item4, index4) in item3.teacher"
                  :key="index4"
                  class="teacher"
                >
                  <img :src="item4.avatar" alt="" />
                  <span>{{ item4.teacher_name }}</span>
                </p>
              </div>
              <div class="ren">
                <p>{{ item3.sales_num }}人已报名</p>
                <p :style="index3 == 0?'color:green':'color:red'">￥{{index3 == 0?'免费':item3.price/100+'.00'}}</p>
              </div>
            </li>
          </ul>
        </van-tab>
        <!-- 下一个 -->
        <van-tab
          :title="item.title"
          v-for="(item, index) in data.IndexTab"
          :key="index"
          :name="item.id"
        >
          <!-- 轮播图 -->
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item
              v-for="(item2, index2) in data.banner"
              :key="index2"
              @click="$router.push(`/goods/${item2.link}`)"
            >
              <img :src="item2.banner_img" alt="" />
            </van-swipe-item>
          </van-swipe>
          <ul class="ul2">
            <li
              v-for="(item1, index1) in data.IndexTab[index].child"
              :key="index1"
            >
              {{ item1.title }}
            </li>
          </ul>
          <div class="juli">
            <van-icon name="smile-o" />
            <p>距离考研198天</p>
          </div>
          <!-- 首页动态列表数据 -->
          <ul class="list">
            <li v-for="(item3, index3) in data.indexList" :key="item.id" @click="$router.push(`/goods/${item3.id}`)">
              <span class="sp">{{ item3.course_classify_title }}</span>
              <p class="p1">{{ item3.title }}</p>
              <div class="div1">
                <p
                  v-for="(item4, index4) in item3.teacher"
                  :key="index4"
                  class="teacher"
                >
                  <img :src="item4.avatar" alt="" />
                  <span>{{ item4.teacher_name }}</span>
                </p>
              </div>
              <div class="ren">
                <p>{{ item3.sales_num }}人已报名</p>
                <p style="color: red">￥{{ item3.price / 10000 }}</p>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </nav>
    <!-- 首页弹框 -->
    <van-action-sheet v-model:show="show">
      <!-- ==0显示 -->
      <div class="box" v-if="data.flag == 0">
        <div class="div1">
          <p><van-icon name="arrow-left" @click="show = false" /></p>
          <h3>选择考试</h3>
        </div>
        <!-- 选择考试 -->

        <ul class="ul1">
          <li v-for="(item, index) in data.list" :key="index">
            <div
              @click="tab(index, item.id, item)"
              class="tab"
              :class="data.index1 == index ? 'active' : ''"
            >
              <p>{{ item.title }}</p>
              <p>{{ item.brief }}</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- ==1显示 -->
      <div class="box" v-if="data.flag == 1">
        <div class="div1">
          <p><van-icon name="arrow-left" @click="back" /></p>
          <h3>经济类联考</h3>
        </div>
        <!-- 选择考试 -->

        <ul class="ul1">
          <li v-for="(item, index) in data.tab" :key="index">
            <div
              @click="tab1(index, item)"
              class="tab"
              :class="data.index1 == index ? 'active' : ''"
            >
              <p>{{ item }}</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- ==2显示 -->
      <div class="box" v-if="data.flag == 2">
        <div class="div1">
          <p><van-icon name="arrow-left" @click="back1" /></p>
          <h3>经济类联考</h3>
          <p v-if="data.isShow == false" @click="Ok">完成</p>
        </div>
        <!-- 选择考试 -->

        <ul class="ul1">
          <li v-for="(item, index) in data.list1" :key="index">
            <div
              @click="tab2(index, item)"
              class="tab"
              :class="data.index1 == index ? 'active' : ''"
            >
              <p>{{ item.major_name }}</p>
            </div>
          </li>
        </ul>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter.js";
import axios from "axios";
import {
  showKuang,
  showKuang1,
  getTab,
  getBanner,
  getKeIndex,
  getIndexList,
  getJingList,
} from "@/http/api";
import { ref, onMounted, reactive } from "vue";

onMounted(() => {
  getTabKuang(); // tab弹框的第一层数据
  getIndexTab(); // 首页tab数据
  getKe(); // 公开课
  getJingIndex(); // 静态数据
});

const store = useCounterStore(); // 定义store
const show = ref(store.Arr.length <= 0);
const data = reactive({
  list: [], // 第一层
  index1: 0, // 对应下标
  flag: 0, // 定义是否显示
  tab: ["在校生", "在职"],
  list1: [], // 第二层
  isShow: true,
  arr: [], // 往vx里存
  IndexTab: [], // 首页tab数据
  active: 0, // tab
  banner: [], // 轮播图数据
  keObj: {}, //  是什么课
  indexList: [], // 首页tab的动态数据
  jingList: [], // 静态
  SanList: [], // 三个人头数据
  lx: {},
});




// tab弹框的第一层数据
const getTabKuang = async () => {
  const res = await showKuang();
  console.log(res[0].title);
  data.list = res;
  // console.log(res);
  // data.lx = res.title;
  // console.log("11111111111111111:", data.lx);
};

// 首页tab数据
const getIndexTab = async () => {
  const res = await getTab(store.Arr[0].id);
  // console.log(res);
  data.IndexTab = res;
};

const guangli = async () => {
  show.value = true;
};

// 公开课
const getKe = async () => {
  const res = await getKeIndex(store.Arr[0].id); // 什么课数据
  // console.log(res);
  data.keObj = res.model_name; // 什么公开课

  // console.log("res::::::::::", res);
};

// tab静态数据
const getJingIndex = async () => {
  const res2 = await getJingList(store.Arr[0].id);
  // console.log(id.name);
  // console.log("res2:::::::::", res2);
  data.jingList = res2; // 静态tab的数据
  // console.log('11111:', data.jingList);
  data.SanList = res2.course_list.slice(0,3 ); // 三个人头数据
  // console.log('三个人头：：：：：',data.SanList);
  data.keObj1 = res2.model_name;
};





const tab = async (i, id, val) => {
  // 点击第一次
  // 弹框内容切换的事件
  data.index1 = i;
  data.flag = 1;
  const res = await showKuang1(id);
  data.list1 = res;
  // console.log("res::::::::::", res);
  data.arr.push(val);
};
const tab1 = (i, val) => {
  // 点击第二次
  data.index1 = i;
  data.flag = 2;
  data.arr.push(val);
};
const tab2 = (i, val) => {
  // 点击第三次
  data.index1 = i;
  data.flag = 2;
  data.isShow = false;
  data.arr.push(val);
};
const back = () => {
  data.flag = 0;
};
const back1 = () => {
  data.flag = 1;
};
const Ok = () => {
  store.getArr(data.arr);
  show.value = false;
  data.flag = 0;
  getTabKuang();
  getJingIndex();
  getIndexTab();
  getKe()
}; 

// tab切换
const navTab = async (id) => {
console.log(id);
   // 轮播图数据
  const res = await getBanner(id.name);
  // console.log(id);
  // console.log(res);
  data.banner = res; // 轮播图
  // 动态tab的数据
    const res1 = await getIndexList(id.name);
  // console.log(id.name);
  // console.log(res1);
  data.indexList = res1; // 动态tab的数据
  getJingIndex(); // 点击是调用静态的数据
};
navTab({name:0})
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  padding: 0 10px;
  header {
    display: flex;
    margin-top: 20px;
    align-items: center;
    padding: 0 0px;
    h1 {
      font-size: 25px;
    }
    .header_right {
      flex: 1;
      margin-left: 60%;
      .van-icon {
        font-size: 34px;
        margin-right: 10px;
        font-weight: bold;
      }
    }
  }

  .van-swipe {
    width: 100%;
    // height: 300px;
    margin-top: 5px;
    img {
      width: 100%;
      // height: 300px;
      border-radius: 20px;
    }
  }
  .ul2 {
    display: flex;
    li {
      background: #fff4e5;
      padding: 15px 20px;
      border: 1px solid #f18d00;
      color: #f15a24;
      margin-top: 20px;
      font-size: 12px;
      margin-right: 30px;
    }
  }
  .juli {
    text-align: center;
    margin-top: 10px;
    p {
      margin-top: 10px;
      font-size: 32px;
      color: #ccc;
    }
  }
  .Sanren {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    margin-top: 60px;
    li {
      width: 30%;
      background: #eaeaea;
      height: 100%;
      border-radius: 20px;
      .div1 {
        height: 280px;
        p{
          font-size: 12px;
        }
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          margin-top: -80px;
        }
        .p1{
          width: 2rem;
           height: 0.53333rem;
           line-height: .53333rem;
           border-radius: 0.53333rem;
           background: #f15a24;
           color: #fff;
           margin: 0.26667rem auto;
        }
        .ren{
          color: #f15a24;
        }
      }
    }
  }
  .list {
    padding: 0 20px;
    margin-top: 50px;
    margin-bottom: 100px;

    li {
      font-size: 32px;
      margin: 30px 0;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 0.04rem 0.09333rem 0 hsl(0deg 0% 81% / 35%);
      .sp {
        width: 120px;
        font-size: 25px;
        padding: 10px 10px;
        background: orangered;
        color: #fff;
      }
      .p1 {
        margin-left: 20px;
      }
      .div1 {
        display: flex;
        align-items: center;
        margin: 40px 40px;
        .teacher {
          margin: 20px 20px;
        }
        img {
          width: 50px;
          height: 50px;
          vertical-align: middle;
          border-radius: 50%;
        }
        span {
          margin-left: 10px;
          font-size: 20px;
        }
      }
      .ren {
        display: flex;
        justify-content: space-between;
        padding: 0 40px;
      }
    }
  }
  .ke {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: -20px;
    h1 {
      font-size: 42px;
    }
    p {
      font-size: 20px;
    }
  }
  h1 {
    font-size: 42px;
    padding: 0 25px;
  }
  .div1 {
    display: flex;
    padding-top: 15px;
    margin-left: 30px;
    margin-right: 30px;
    align-items: center;
    .van-icon {
      width: 60px;
      text-align: center;
    }
    h3 {
      flex: 1;
      text-align: center;
      font-size: 20px;
      margin-right: 40px;
    }
  }
  .ul1 {
    margin-bottom: 20px;
    li {
      display: flex;
      align-items: center;
      text-align: center;
      padding: 0 60px;
      .tab {
        width: 100%;
        background: #f8f8f5;
        margin: 10px 0;
        height: 88px;
        border-radius: 40px;
        p {
          // text-align: center;
          font-size: 12px;
          margin: 10px 0;
        }
      }
      .active {
        color: #fff;
        background: #f15a24;
      }
    }
  }
}
</style>
